
<template>
    <div>
        <div class="statistics-data">
            <div
                :id="id"
                class="kschart"
                style="width:86px"
            />
        </div>
    </div>
</template>
<script>
import minxins from './minxins'
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");
require('echarts/lib/component/dataZoom');
import { GridComponent } from 'echarts/components'
echarts.use([GridComponent])
import { LineChart } from 'echarts/charts';
echarts.use([LineChart]);
export default {
    name: 'kscharts',
    mixins: [minxins],
    props: {
        id: {
            type: String,
            default: ""
        },
        type: {
            type: String,
            default: ""
        },
        staticticsData: {
            type: Object,
            default: () => { }
        }
    },

    data () {
        return {
            option: {},
            // 右边的y轴的最大值
            maxCount: 0,
            xAxis: [],
            series: [],
            // 图例颜色列表
            colorList: ["#7ca1f3", "#8edab5", "#77839e", "#f0c757", "#d4defc"]
        }
    },
    computed: {
    },
    mounted () {
        this.handleRefresh()
        window.addEventListener('resize', ()=>{
          this.echartsStyle()
        })
    },
    methods: {
      echartsStyle(){
        const oIframe = document.getElementById(this.id);
        const maintainTypeChart = echarts.init(oIframe);
        maintainTypeChart.resize();
      },
        // 类型更新
        changeType (id, type) {
          console.log(type)
            this.id = id
            this.staticticsData.type = type
            this.handleRefresh()
        },
        // 全量数据更新
        search (staticticsData) {
            console.log(staticticsData)
            this.staticticsData = staticticsData
            this.handleRefresh()
        },
        handleRefresh () {
            this.handleEchartData()
        },
        refreshChart () {
            var maintainTypeChart;
            let dataZoomEnd = (5 / this.xAxis.length) * 100;
            this.option = {
                "grid": {
                    left: '0%',
                    right: '10%',
                    bottom: '15%',
                    top: '25%',
                    containLabel: true
                },
                legend: {
                    data: this.staticticsData.noCategory, // todo
                    orient:'vertical',
                    x: 'right',
                    y: 'center',
                    padding:20,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 50,
                    borderRadius: 20,
                    barBorderRadius: 20
                },
                // color:['#6A88FF','#AF2561','#FBAD54'], // todo
                xAxis: this.xAxis,
                yAxis: [{
                    name: '',
                    type: 'value',
                    //只显示整数
                    minInterval: 1,
                    axisLine: {
                        //隐藏y坐标轴
                        show: false
                    },
                    //y轴字体样式
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9495ab',
                            fontSize: '12'
                        }
                    },
                    //网格样式
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#e4e4e4',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //隐藏y坐标轴刻度
                        show: false
                    }
                }],
                tooltip: {
                    trigger: 'axis',
                    position: 'top',
                    // axisPointer : {
                    //     // 坐标轴指示器，坐标轴触发有效
                    //     type: 'shadow'
                    //     // 默认为直线，可选为：'line' | 'shadow'
                    // },
                    // formatter: "{a} {b} : {c}"
                },
                series: this.series,
                // 数据区域缩放组件配置
                dataZoom: [{
                  type: 'slider',
                  // 数据窗口范围的起始百分比
                  start: 0,
                  // 数据窗口范围的结束百分比
                  end: dataZoomEnd,
                  // 是否锁定选择区域（或叫做数据窗口）的大小，如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
                  zoomLock: true
                },
                  // 手柄的icon相关配置
                  {
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                      color: '#fff',
                      shadowBlur: 3,
                      shadowColor: 'rgba(0, 0, 0, 0.6)',
                      shadowOffsetX: 2,
                      shadowOffsetY: 2
                    }
                  }]
            };
            maintainTypeChart = echarts.init(document.getElementById(this.id));
            maintainTypeChart.setOption(this.option,true);
        },
        // 给表格需要渲染的数据赋值
        async handleEchartData () {
            this.xAxis = []
            // 对多x轴的处理
            this.staticticsData.xAxis.forEach((v,index)=> {
                v.position =  'bottom'
                v.axisLine= { show: false }
                v.axisTick= { show: false }
                v.splitArea= { show: false }
                v.splitLine= { show: false }
                if(index !== 0){
                    v.offset= 20
                }
                this.xAxis.push(v)
            })
            this.series = []
            this.staticticsData.yAxis.forEach(v => {
                v.barWidth = 10
                v.type = this.staticticsData.type;
              if(v.type === 'bar'){
                v.stack = 'stack'
              }else{
                delete v.stack
              }
              if(v.name === '故事'){
                v.itemStyle = {
                  normal : {
                    color:'#d81e06'
                  }
                }
              }
              if(v.name === '知识付费'){
                v.itemStyle = {
                  normal : {
                    color:'#13BBB0'
                  }
                }
              }
                // v.itemStyle = {
                //     normal: {
                //         //柱体圆角
                //         barBorderRadius: [10, 10, 0, 0],
                //         //柱体颜色渐变
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //             offset: 0,
                //             color: '#FF7C4E'
                //         }, {
                //             offset: 1,
                //             color: '#D24A19'
                //         }]),
                //     }
                // }
                this.series.push(v)
            });
            this.refreshChart();
        },
    }
}
</script>
<style lang="scss" scoped>
.timeSearch {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 14px;
}
.title {
    height: 60px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #181818;
    line-height: 60px;
    padding-left: 12px;
    border-bottom: 1px solid #e4e7ee;
}
.el-icon-info {
    color: #e99e42;
    margin-left: 20px;
}
.statistics-data {
    display: flex;
    height: 381px;
    overflow: hidden;
    .compare-data {
        width: 184px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-right: 1px solid #f3f5f9;
        margin: 42px 0;
        > div {
            margin: 10px 0;
            text-align: left;
            .label-text {
                padding-left: 35px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 20px;
            }
            p {
                padding-left: 35px;
                .count {
                    font-weight: 600;
                    line-height: 64px;
                    width: 119px;
                    font-size: 22px;
                    font-family: Helvetica;
                    color: #181818;
                }
            }

            .compare {
                display: flex;
                padding: 0 35px;
                justify-content: space-between;
                span {
                    font-size: 14px;
                    color: #9fa5b6;
                }
                ._81b437 {
                    color: #81b437;
                }
                ._2d54b6 {
                    color: #2d54b6;
                }
                ._e99e42 {
                    color: #e99e42;
                }
            }
        }
    }
    .kschart {
        height: 400px;
        flex: 1;
        padding-left: 26px;
        top: -30px;
    }
}
</style>
